<template >
    <!-- 查询区 -->
    <div class="search" >
            <el-form :inline="true" :model="ad" ref="searchfromat">
                <el-form-item label="房间编号" prop="roomId" style="width: 200px;">
                    <el-input placeholder="请输入房间编号" v-model="ad.roomId" />
                </el-form-item>
                <el-form-item label="房间类型" prop="roomName" style="width: 200px;">
                    <el-input placeholder="请输入房间类型" v-model="ad.roomName" />
                </el-form-item>
                <el-form-item label="房间状态" prop="roomStatus" style="width: 200px;   ">
                    <el-input placeholder="请输入房间状态" v-model="ad.roomStatus" />
                </el-form-item>
                <el-form-item label="价格范围" prop="priceFrom" style="width: 200px;">
                    <el-input placeholder="最低价格" v-model="ad.priceFrom" />
                </el-form-item>
                <el-form-item label="~" prop="priceTo" style="width:200px;margin-left: -20px">
                    <el-input placeholder="最高价格" v-model="ad.priceTo" />
                </el-form-item>
                <el-form-item label="套餐名称" prop="facilityName" style="width:200px;">
                    <el-input placeholder="请输入套餐名称" v-model="ad.facilityName"  />
                </el-form-item>
                <el-form-item label="备注" prop="description" >
                    <el-input placeholder="请输入房间的备注" v-model="ad.description"  />
                </el-form-item>
                <el-button type="primary" :icon="Search" @click="search" style="margin-bottom: 20px;">查询</el-button>
                <el-button type="primary" :icon="Refresh" @click="restform" style="margin-bottom: 20px;">重置</el-button>
            </el-form>
        </div>
        <!-- 按钮 -->
        <div class="action" style="position: relative;margin-left: 690px ;margin-top: -52px; ">
            <el-button type="primary" :icon="CirclePlus" @click=addnew>新增</el-button>
        </div>
     <!-- 表格 -->
     <div class="grid" style="margin-top: 5px;">
            <el-table :data="tableData" border style="width: 100%"  :header-cell-style="headerCellStyle"
                ref="tabfact">
                <el-table-column prop="id" label="ID" width="50" align="center"/>
                <el-table-column prop="roomId" label="房间编号" width="110" align="center"/>
                <el-table-column prop="roomName" label="房间类型" align="center"/>
                <el-table-column prop="picture" label="图片" width="180" align="center">
                        <template #default="scope">
                            <div class="row-avatar" :style="'background-image:url('+scope.row.picture+')'"></div>
                        </template>
                    </el-table-column>
                <el-table-column prop="price" label="价格" width="70" align="center"/>
                <el-table-column prop="roomStatus" label="当前状态(0/1)" width="100" align="center"/>
                <el-table-column prop="facilityName" label="套餐名称" align="center"/>
                <el-table-column prop="description" label="备注" align="center"/>
                <el-table-column fixed="right" label="操作" width="160" align="center">
                <!-- 点击时获取这行的数据   -->
                <template v-slot="scope">
                    <el-button type="primary" size="small" @click="edit(scope.row)">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button type="danger" size="small" @click="delbyid(scope.row)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination v-model:current-page="pi.pageNo" v-model:page-size="pi.pageSize"
                    :page-sizes="[5, 10, 20, 40]" :total="pi.total" layout="total, sizes, prev, pager, next, jumper"
                    background @change="paginate" />
            </div>
        </div>
          <!-- 新增删除表单 -->
          <el-dialog v-model="show" :title="title" width="800" draggable :close-on-click-modal="false"  @close="close" style="margin-bottom: 5px;text-align: center;">
            <el-form :model="aeform" ref="sfRef">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="房间编号：" label-width="100" prop="roomId" >
                            <el-input v-model="aeform.roomId" placeholder="请输入房间编号" />
                        </el-form-item>
                        <el-form-item label="房间类型：" label-width="100" prop="roomName">
                            <el-input v-model="aeform.roomName" placeholder="请输入房间类型" />
                        </el-form-item>
                        <el-form-item label="房间价格：" label-width="100" prop="price">
                            <el-input v-model="aeform.price" placeholder="请输入房间价格" />
                        </el-form-item>
                        <el-form-item label="房间状态：" label-width="100" prop="roomStatus">
                            <el-input v-model="aeform.roomStatus" placeholder="请输入房间状态" />
                        </el-form-item>
                        
                      
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="头像：" label-width="100" prop="picture">
                            <el-upload class="avatar" action="/api/uploads/avatar" :show-file-list="false"
                                :on-success="avatarSuccess">

                                <div class="preview" v-if="aeform.picture" :style="'background-image:url(' + aeform.picture + ')'">
                                </div>

                                <el-icon class="icon" v-else>
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </el-form-item> 
                        <el-form-item label="套餐名称：" label-width="100" prop="facilityName" style="margin-top: 48px;">
                            <el-input v-model="aeform.facilityName" placeholder="请输入套餐名称" />
                        </el-form-item> 
                    </el-col>                   
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注：" label-width="100" prop="description">
                            <el-input v-model="aeform.description" style="width: 100%;" :rows="7" type="textarea"
                                placeholder="请输入备注信息" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!-- 对话框的按钮。插槽 -->
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="show = false">取消</el-button>
                    <el-button type="primary" @click="submitForm">确认</el-button>
                </div>
            </template>
        </el-dialog>
</template>
<script setup>
import { findall,deletebyid,adduser,updateuser} from "@/api/roomApi.js";
import { ref, onMounted, toRaw ,nextTick} from "vue";
import { Delete, Edit, Search, Refresh, CirclePlus,Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
onMounted(() => {
    search();
});
let tableData=ref();
async function search(){
    let params=ad.value;
 tableData.value=await findall(pi.value.pageNo,pi.value.pageSize,params);
 pi.value.pageNo=parseInt(sessionStorage.getItem("pageNo"));
 pi.value.pageSize=parseInt(sessionStorage.getItem("pageSize"));
 pi.value.total=parseInt(sessionStorage.getItem("total"));

}
let pi=ref({
    pageNo: 1,
    pageSize: 10,
    total: 0,
})
//分页点击事件
function paginate() {
    search();
}
//表头颜色
function headerCellStyle() {
    return {
        backgroundColor: "#B3CAD8",
        textAlign: "center",
        color: "#fff"
    }
}
//查询
//表单内容
let ad = ref({
    roomId: "",
    roomName: "",
    priceFrom:"",
    priceTo:"",
    roomStatus: "",
    facilityName:"",
    description: "",
})
let searchfromat;
function restform(){
    searchfromat.resetFields();
    search();
}
//删除
function delbyid(row){
    ElMessageBox.confirm(
        "您确定要删除吗？",
        "确认", {
        type: 'warning',
    }
    ).then(async () => {
        let id = row.id;
        let ids = [];
        ids.push(id);
        let resp = await deletebyid(ids);
        if (resp.success) {
            ElMessage({
                message: "删除成功",
                type: "success"
            });
            //成功之后刷新
            search();
        } else {
            ElMessage({
                message: "删除失败,请联系管理员",
                type: "error"
            });
        }
    })
}
//修改 新增
let aeform=ref({
    roomId: "",
    roomName: "",
    picture:"",
    price:"",
    roomStatus: "",
    facilityName:"",
    description: "",
});
let show=ref(false);
let title=ref("新增房间");
function addnew(){
    title.value="新增房间";
    show.value=true;
}
function edit(row){
    //浅克隆
    row = Object.assign({}, row);
    title.value="修改房间";
    show.value=true;
    console.log(row);
    nextTick(()=>{
        aeform.value=row;
    });
}
let sfRef;//新增和修改表单的实例引用
//关闭对话框时触发此事件
function close() {
    sfRef.resetFields();//重置表单
}
function submitForm(){
    //console.log(aeform);
    let adminadd=toRaw(aeform.value);
    //console.log(adminadd);
    if(adminadd.id){//修改
        submitEdit(adminadd);
    }else{//新增
        submitadd(adminadd);
    }
}
async function submitadd(adminadd){
    let resp= await adduser(adminadd);
    if (resp.success) {
        ElMessage({
            message: '操作已成功',
            type: 'success',
        });
        search();
        show.value = false;
    } else {
        ElMessage({
            message: '操作失败，请检查数据完整性或联系管理员',
            type: 'error',
        });
        search();
        //show.value = false;
    }
}
async function submitEdit(ad) {
    //向后台提交数据
    let resp = await updateuser(ad);

    if (resp.success) {
        ElMessage({
            message: '操作已成功',
            type: 'success',
        });
        search();
        show.value = false;
    } else {
        ElMessage({
            message: '操作失败，请检查数据完整性或联系管理员',
            type: 'error',
        });
        //search();
        //show.value = false;
    }
}
//上传头像
//头像上传成功时的回调函数
function avatarSuccess(resp, file) {
    //console.log(resp);
    if (resp.success) {
        aeform.value.picture = resp.url;
    }
}


</script>
<style scoped>


.avatar {
    width: 170px;
    height: 100px;
    border: 1px solid #ccc;
}
.avatar .icon {
    width: 170px;
    height: 95px;
}
.avatar .preview {
    width: 170px;
    height: 113px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.row-avatar {
    width: 150px;
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
}

</style>